<template>
  <div class="box">
      <ETFStockGraph
              v-loading="loading"
              element-loading-text="图谱加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 0.8)"
              ref="graph"
              :labels="labels"
              :names="names"
              :linkTypes="linkTypes"
              :graph-data="graphData"
      ></ETFStockGraph>
  </div>
</template>

<script>
import ETFStockGraph from "@/page/stockETF/Component/ETFStockGraph.vue";
import D2 from "@/page/D2Page/components/D2.vue";
import {getEtfStockGraphData} from "@/api/etf";

export default {
    name: "Index",
    components: {D2, ETFStockGraph},
    data(){
        return{
            names: ['公司名称', '工业', '产品', '国家'],
            labels: ['company', 'etf', 'product', 'holdCompany'],
            linkTypes: ['', '包含', 'zhuyingchanpin', 'chanpinxiaolei', 'shangyoucailiao'],
            graphData:{
                nodes:[],
                links:[]
            },
            loading:false
        }
    },
    methods:{
        async getETFStockData(){
          this.loading=true
           await getEtfStockGraphData(23).then((reponse)=>{
              let data= reponse.data.data
              this.graphData.nodes=data.node
               this.graphData.links=data.relationship
           }).catch((err)=>{
               console.log(err)
           })
            this.loading=false
            this.$refs.graph.d3init()
        }
    },
    beforeMount() {
        this.getETFStockData()

    }
}
</script>

<style scoped>
.box{
    width: 100%;
    height: 100%;
}
</style>